import React, { useState } from 'react'
import { Card, List, Input, Button, Avatar, Space, Tag, Modal, Form, Select, Rate, Divider } from 'antd'
import { MessageOutlined, PhoneOutlined, RobotOutlined, UserOutlined } from '@ant-design/icons'
import Layout from '../components/Layout/Layout'

const { TextArea } = Input
const { Option } = Select

export default function CustomerService() {
  const [conversations, setConversations] = useState([
    {
      id: 1,
      user: '张先生',
      lastMessage: '停车场收费标准是什么？',
      time: '10:30',
      status: 'active',
      type: 'chat',
      priority: 'normal'
    },
    {
      id: 2,
      user: '李女士',
      lastMessage: '会议室预订问题',
      time: '09:45',
      status: 'waiting',
      type: 'phone',
      priority: 'high'
    }
  ])

  const [selectedConversation, setSelectedConversation] = useState(null)
  const [messages, setMessages] = useState([
    {
      id: 1,
      sender: 'user',
      content: '你好，请问停车场的收费标准是什么？',
      time: '10:25',
      type: 'text'
    },
    {
      id: 2,
      sender: 'bot',
      content: '您好！我们的停车收费标准如下：\n- 前2小时免费\n- 超过2小时：5元/小时\n- 24小时封顶：50元\n\n还有其他问题吗？',
      time: '10:26',
      type: 'text'
    },
    {
      id: 3,
      sender: 'user',
      content: '月卡怎么办理？',
      time: '10:30',
      type: 'text'
    }
  ])

  const [inputMessage, setInputMessage] = useState('')
  const [knowledgeBase, setKnowledgeBase] = useState([
    {
      id: 1,
      question: '停车收费标准',
      answer: '前2小时免费，超过2小时5元/小时，24小时封顶50元',
      category: 'parking',
      hits: 156
    },
    {
      id: 2,
      question: '会议室预订流程',
      answer: '登录系统 → 选择会议室 → 选择时间 → 填写会议信息 → 提交申请',
      category: 'meeting',
      hits: 89
    }
  ])

  const handleSendMessage = () => {
    if (!inputMessage.trim()) return

    const newMessage = {
      id: Date.now(),
      sender: 'agent',
      content: inputMessage,
      time: new Date().toLocaleTimeString().slice(0, 5),
      type: 'text'
    }

    setMessages(prev => [...prev, newMessage])
    setInputMessage('')

    // 模拟自动回复
    setTimeout(() => {
      const autoReply = {
        id: Date.now() + 1,
        sender: 'bot',
        content: '感谢您的咨询，我会尽快为您处理。',
        time: new Date().toLocaleTimeString().slice(0, 5),
        type: 'text'
      }
      setMessages(prev => [...prev, autoReply])
    }, 1000)
  }

  return (
    <Layout>
      <div style={{ padding: '24px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr 300px', gap: 16, height: 'calc(100vh - 200px)' }}>
          {/* 对话列表 */}
          <Card title="对话列表" size="small">
            <List
              dataSource={conversations}
              renderItem={(item) => (
                <List.Item
                  style={{
                    cursor: 'pointer',
                    backgroundColor: selectedConversation?.id === item.id ? '#f0f0f0' : 'transparent'
                  }}
                  onClick={() => setSelectedConversation(item)}
                >
                  <List.Item.Meta
                    avatar={<Avatar icon={<UserOutlined />} />}
                    title={
                      <Space>
                        {item.user}
                        {item.type === 'phone' && <PhoneOutlined style={{ color: '#1890ff' }} />}
                        {item.priority === 'high' && <Tag color="red">紧急</Tag>}
                      </Space>
                    }
                    description={
                      <div>
                        <div>{item.lastMessage}</div>
                        <div style={{ fontSize: 12, color: '#999' }}>{item.time}</div>
                      </div>
                    }
                  />
                </List.Item>
              )}
            />
          </Card>

          {/* 聊天窗口 */}
          <Card title={selectedConversation ? `与 ${selectedConversation.user} 的对话` : '选择对话'} size="small">
            {selectedConversation ? (
              <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                <div style={{ flex: 1, overflowY: 'auto', marginBottom: 16 }}>
                  {messages.map((message) => (
                    <div
                      key={message.id}
                      style={{
                        display: 'flex',
                        justifyContent: message.sender === 'user' ? 'flex-start' : 'flex-end',
                        marginBottom: 12
                      }}
                    >
                      <div
                        style={{
                          maxWidth: '70%',
                          padding: '8px 12px',
                          borderRadius: '8px',
                          backgroundColor: message.sender === 'user' ? '#f0f0f0' : '#1890ff',
                          color: message.sender === 'user' ? '#000' : '#fff'
                        }}
                      >
                        <div>{message.content}</div>
                        <div style={{ fontSize: 10, opacity: 0.7, marginTop: 4 }}>
                          {message.time}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <Input
                    value={inputMessage}
                    onChange={(e) => setInputMessage(e.target.value)}
                    onPressEnter={handleSendMessage}
                    placeholder="输入消息..."
                  />
                  <Button type="primary" onClick={handleSendMessage}>
                    发送
                  </Button>
                </div>
              </div>
            ) : (
              <div style={{ textAlign: 'center', color: '#999', marginTop: 100 }}>
                请选择一个对话开始聊天
              </div>
            )}
          </Card>

          {/* 知识库 */}
          <Card title="知识库" size="small">
            <List
              dataSource={knowledgeBase}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    title={item.question}
                    description={
                      <div>
                        <div style={{ fontSize: 12 }}>{item.answer}</div>
                        <div style={{ fontSize: 10, color: '#999', marginTop: 4 }}>
                          点击量: {item.hits}
                        </div>
                      </div>
                    }
                  />
                </List.Item>
              )}
            />
          </Card>
        </div>
      </div>
    </Layout>
  )
}